<template>
  <div id="login-phone">
    <el-form :model="form" :rules="rules" ref="phoneForm" class="demo-ruleForm">
      <el-form-item prop="phone">
        <el-input v-model="form.phone" @keyup.enter.native="loginPhone()" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="form.code" type="text" @keyup.enter.native="loginPhone()" placeholder="请输入验证码">
          <template #suffix>
            <div class="get-code" @click="ResendCode(form.phone, 'publicApi', 'getSigninIphone', '', 1)">
              {{ btnText }}
            </div>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <captcha-account ref="captchaAccount" />
    <div class="login-btn-phone">
      <el-button class="btn" @click="loginPhone()" :loading="loading" type="primary" round>登 录</el-button>
      <span v-if="!page" class="cz_span">
        <span @click="onPassword" class="_span hoverToBlue">忘记密码</span>
        <span class="hx">|</span>
        <span @click="onSignup" class="_span hoverToBlue">注册</span>
        <!-- <span class="hx">|</span>
        <span @click="qrCode" class="_span hoverToBlue">扫码登录</span> -->
      </span>
    </div>
  </div>
</template>

<script>
import useGetCode from "../mixins/useGetCode";
import { rules } from "../config/phoneRules";
import instance from "@/config/http";
import { acLoginMobile } from "@/config/config";
import captchaAccount from "./captchaAccount.vue";

export default {
  props: {
    page: {
      //page==financialLogin   财务大管家手机号登录
      type: String,
    },
  },
  components: { captchaAccount },
  data() {
    return {
      form: {
        phone: "",
        code: "",
        ...acLoginMobile,
      },
      loading: false,
      rules: rules,
    };
  },
  mixins: [useGetCode],
  methods: {
    qrCode() {
      this.$emit("QrCode");
    },
    loginPhone(data) {
      // nvcVal2无痕验证触发二次验证的参数（人机信息串）
      if (data) {
        if (this.isCode) this.ResendCode(this.form.phone, "publicApi", "getSigninIphone", data, "1");
      } else {
        // if (!this.$refs.captchaAccount.submit()) return;
      }
      this.$refs.phoneForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          if (this.page === "financialLogin") {
            const { data } = await this.$api.optionsManage.RegAuthCode(this.form);
            this.loading = false;
            if (data.status !== 200) return;
            instance.defaults.headers["Authorization"] = data.data;
            this.$store.dispatch("GetToken", data.data);
            // this.$router.push({ name: 'select', query: this.form });
            this.$emit("GetParams", this.form);
            return;
          }
          this.$api.publicApi
            .LoginNonTrace({
              ...this.form,
              username: this.form.phone,
            })
            .then((res) => {
              console.log(res);
              if (res.data.status == 204) {
                this.$message({ message: res.data.message, type: "warning" });
              }
              console.log(res);
              const token = !res.data.data.enterpriseList?.length;
              token ? this.$emit("phoneLoginSuccess", res.data) : this.$emit("selectEnterprise", res.data.data.enterpriseList);
              // this.$refs.captchaAccount.verify({ data: res }, () => {
              //   // token存在只有一个企业登录成功   token不存在有多个企业进入选择企业
              //   const token = !res.data.data.enterpriseList?.length;
              //   token ? this.$emit('phoneLoginSuccess', res.data) : this.$emit('selectEnterprise', res.data.data.enterpriseList);
              // });

              this.loading = false;
            })
            .catch((res) => {
              if (res.data.status == "424") {
                // this.isExpire = true;
                this.$emit("expire", res.data.data);
              }
              window?.nvc?.reset();
              // this.$message({ message: res.data.message, type: "warning" });
              this.loading = false;
            });
        } else {
          setTimeout(() => {
            var isError = document.getElementsByClassName("is-error");
            isError[0].querySelector("input").focus();
          }, 1);
        }
      });
    },
    onSignup() {
      this.$emit("signup");
    },
    onPassword() {
      this.$emit("ResetPasswordFun");
    },
  },
};
</script>

<style lang="less" scoped>
#login-phone {
  #captcha-phone {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .el-form-item {
    margin-top: 12%;
  }
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  .get-code {
    color: #5b95f9;
    cursor: pointer;
  }
  .login-btn-phone {
    display: flex;
    flex-direction: column;
    .btn {
      width: 80%;
      margin: 0 auto;
      height: 35px;
      font-size: 13px !important;
      line-height: 12px;
      margin-top: 12%;
      border-radius: 2px;
      font-weight: 600;
      transition: none;
    }
    .cz_span {
      float: right;
      margin-top: 7%;
      > span {
        margin-left: 10px;
      }
      .hx {
        color: #ccc;
      }
    }
    :deep(._span) {
      // margin-top: 7%;
      color: #999;
      font-size: 13px;
      &:hover {
        color: #5b95f9;
      }
    }
  }
}
</style>
